<template>
  <a-form :form="form">
    <div v-for="(item, index) in empReward.empRewardPunishList" :key="item.guid || item.id">
      <a-col :span="10">
        <a-form-item label="奖励/惩罚" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">
            <span v-show="item.rewardPunish === 1"> 奖励</span><span v-show="item.rewardPunish === 2">惩罚 </span>
          </span>
          <a-select
            v-decorator="[`rewardPunish-${index}`, { initialValue: item.rewardPunish }]"
            @change="change1($event, index, 'rewardPunish')"
            v-else
          >
            <a-select-option :value="1">奖励</a-select-option>
            <a-select-option :value="2">惩罚</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="奖惩类别" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <a-select
            v-if="item.rewardPunish == 1 && !disable"
            v-decorator="[`rewardType-${index}`, { initialValue: item.rewardType }]"
            @change="change1($event, index, 'rewardType')"
          >
            <a-select-option :value="1">通报表扬</a-select-option>
            <a-select-option :value="2">年度优秀员工奖</a-select-option>
            <a-select-option :value="3">特殊贡献奖</a-select-option>
          </a-select>

          <a-select
            v-else-if="item.rewardPunish !== 1 && !disable"
            v-decorator="[`rewardType-${index}`, { initialValue: item.rewardType }]"
            @change="change1($event, index, 'rewardType')"
            :disabled="disable"
          >
            <a-select-option :value="1">通报批评</a-select-option>
            <a-select-option :value="2">警告</a-select-option>
            <a-select-option :value="3">严重警告</a-select-option>
            <a-select-option :value="4">记过处分</a-select-option>
            <a-select-option :value="5">辞退处分</a-select-option>
          </a-select>
          <span class="text_color" v-else>
            <span v-show="item.rewardType === 1 && item.rewardPunish == 1">通报表扬</span>
            <span v-show="item.rewardType === 2 && item.rewardPunish == 1">年度优秀员工奖</span>
            <span v-show="item.rewardType === 3 && item.rewardPunish == 1">特殊贡献奖</span>
            <span v-show="item.rewardType === 1 && item.rewardPunish !== 1">通报批评</span>
            <span v-show="item.rewardType === 2 && item.rewardPunish !== 1">警告</span>
            <span v-show="item.rewardType === 3 && item.rewardPunish !== 1">严重警告</span>
            <span v-show="item.rewardType === 4 && item.rewardPunish !== 1">记过处分</span>
            <span v-show="item.rewardType === 5 && item.rewardPunish !== 1">辞退处分</span>
          </span>
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="奖惩时间" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.handleDate ? moment(item.handleDate).format("YYYY-MM-DD") : "" }}</span>
          <a-date-picker
            v-decorator="[`handleDate-${index}`, { initialValue: getMoment(item.handleDate) }]"
            placeholder="选择日期"
            style="width:100%"
            v-else
            @change="change2($event, index, 'handleDate')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="奖惩内容" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.content }}</span>
          <a-input v-decorator="[`content-${index}`, { initialValue: item.content }]" v-else @change="change($event, index, 'content')" />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="奖惩金额" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.amount }}</span>
          <a-input
            type="number"
            v-decorator="[`amount-${index}`, { initialValue: item.amount }]"
            @change="change($event, index, 'amount')"
            v-else
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="奖惩原因" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.reason }}</span>
          <a-input v-decorator="[`reason-${index}`, { initialValue: item.reason }]" v-else @change="change($event, index, 'reason')" />
        </a-form-item>
      </a-col>
      <a-col :span="17">
        <a-form-item label="奖惩备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
          <span class="text_color" v-if="disable">{{ item.remark }}</span>
          <a-input
            type="textarea"
            v-decorator="[`remark-${index}`, { initialValue: item.remark }]"
            v-else
            @change="change($event, index, 'remark')"
          />
        </a-form-item>
      </a-col>

      <a-col :span="10">
        <a-form-item :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <a-input v-decorator="[`id-${index}`, { initialValue: String(item.id) }]" type="hidden" />
        </a-form-item>
      </a-col>
      <a-col v-if="!disable" :span="17" class="mb24">
        <a-button type="dashed" style="width:100%;height:44px;" @click="delHandle(item)">删除</a-button>
      </a-col>
      <a-col v-if="index != empReward.empRewardPunishList.length - 1" :span="17" class="border-top mb12"></a-col>
    </div>
    <div v-if="!disable">
      <a-col :span="17" class="border-top"></a-col>
      <a-col :span="17" class="mt24 mb24">
        <a-button type="dashed" style="width:100%;height:44px;" @click="addHandle">新增</a-button>
      </a-col>
      <a-col :span="23">
        <div class="basicInfo-button-group">
          <a-button class="mr12" @click="cancel">取消</a-button>
          <a-button type="primary" @click="submit">确认</a-button>
        </div>
      </a-col>
    </div>
  </a-form>
</template>
<script>
import { updateEmpAllInfo } from "@/api/staff/staff";
export default {
  name: "RewardForm",
  props: {
    empReward: {
      type: Object
    },
    disable: {}
  },
  data() {
    return {
      rewardShow: true,
      form: this.$form.createForm(this)
    };
  },
  watch: {
    empReward() {
      if (this.empReward.empRewardPunishList == null || this.empReward.empRewardPunishList.length === 0) {
        this.$set(this.empReward, "empRewardPunishList", [{}]);
      }
    }
  },
  methods: {
    reward() {
      this.rewardShow = true;
    },
    punish() {
      this.rewardShow = false;
    },
    change(e, index, key) {
      this.$set(this.empReward.empRewardPunishList, index, {
        ...this.empReward.empRewardPunishList[index],
        [key]: e.target.value
      });
    },
    change1(e, index, key) {
      this.$set(this.empReward.empRewardPunishList, index, {
        ...this.empReward.empRewardPunishList[index],
        [key]: e
      });
    },
    change2(e, index, key) {
      this.$set(this.empReward.empRewardPunishList, index, {
        ...this.empReward.empRewardPunishList[index],
        [key]: this.getMoment(e)
      });
    },
    cancel() {
      this.$emit("cancelEdit");
      if (!this.empReward.empRewardPunishList || this.empReward.empRewardPunishList.length === 0) {
        this.empReward.empRewardPunishList.push({ guid: Math.random() * 16 });
      }
    },
    addHandle() {
      if (this.empReward.empRewardPunishList === null) {
        this.empReward.empRewardPunishList = [];
      }
      this.empReward.empRewardPunishList.push({ guid: Math.random() * 16 });
    },
    delHandle(item) {
      const index = this.empReward.empRewardPunishList.indexOf(item);

      if (index !== -1) {
        this.empReward.empRewardPunishList.splice(index, 1);
      }
    },
    getMoment(date) {
      return date ? this.moment(date) : null;
    },
    submit() {
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          const value = this.beautyData(values);
          value.map(item => {
            item.amount = item.amount * 100;
          });

          setTimeout(() => {
            updateEmpAllInfo({
              id: this.empReward.id,
              phone: this.empReward.phone,
              empRewardPunishList: value
            }).then(res => {
              that.$notification["success"]({
                message: "success",
                description: "编辑成功"
              });
              that.$emit("cancelEdit");
            });
          }, 300);
        }
      });
    },
    beautyData(data) {
      var arr = [];
      this.empReward.empRewardPunishList.forEach((item, index) => {
        arr[index] = {
          rewardPunish: data[`rewardPunish-${index}`],
          rewardType: data[`rewardType-${index}`],
          content: data[`content-${index}`],
          amount: data[`amount-${index}`],
          reason: data[`reason-${index}`],
          remark: data[`remark-${index}`],
          handleDate: this.getMoment(data[`handleDate-${index}`]),
          //  "endTime": this.getMoment(data[`endTime-${index}`]),
          //  "isFirstEdu": data[`isFirstEdu-${index}`],
          id: data[`id-${index}`]
        };
      });
      return arr;
    }
  }
};
</script>

<style scoped>
.basicInfo-button-group {
  text-align: center;
  padding-bottom: 24px;
}
</style>
